import React, { Component } from 'react';
import { Link } from 'react-router';
import { inject, observer } from 'mobx-react';
import { Toast, ListView, Picker, Flex, List } from 'antd-mobile'
import { createForm } from 'rc-form';
import Top from 'components/top'
import Ajax from 'lib/Ajax'
import ListMixin from 'mixin/list'

const pageName = 'testing'

@inject('appStore', 'languageStore')
@observer
class ModuleName extends ListMixin{
	constructor(props) {
    super(props);
    this.state = Object.assign({
    	categoryId: ''
		}, this.state);
		this.listApi = '/testing/list'
  }

  renderRow = (rowData, sectionID, rowID)=>{
    const { imgBaseUrl, commonData } = this.props.appStore;
    return (
        <div key={rowID} className="activity-item">
          <Link to={`/testing/${rowData.testingId}`}>
            <img src={`${imgBaseUrl}${rowData.listImg}`} alt=""/>
            <div className="row-text">
              <div className="t">{rowData.title}</div>
              <div className="b">
                {rowData.createTime}
                {/*<span className="fr">阅读量{rowData.readCount}</span>*/}
              </div>
            </div>
          </Link>
        </div>
      );
  }

render() {
	const pageData = this.props.languageStore.getPageData(pageName);
	const { imgBaseUrl, commonData } = this.props.appStore;
	const testingTypeEn = (commonData.testingTypeEn||[]).map(item => {
      return {
        value: item.code,
        label: item.mean
      }
    });
	return (
		<div className={pageName}>
			<Top
          title={pageData.title}
        />
			<div className="filter">
        <Picker data={testingTypeEn} cols={1} value={this.state.categoryId} onChange={(value)=>{
            this.doSearch({categoryId: value[0]});
            this.setState({
              categoryId: value
            });
          }} className="forss">
          <List.Item arrow="horizontal">请选择分类</List.Item>
        </Picker>
			</div>
			<div className="list">
				<ListView ref="lv"
					dataSource={this.state.dataSource}
					renderFooter={this.renderFooter}
					renderRow={this.renderRow}
					className="fortest"
					pageSize={4}
					scrollRenderAheadDistance={500}
					scrollEventThrottle={20}
					onScroll={() => { console.log('scroll'); }}
					onEndReached={this.onEndReached}
					onEndReachedThreshold={10}
					stickyHeader
				/>
			</div>
		</div>
    )
  }
}

module.exports = ModuleName
